{% extends 'home.html' %}
{% block content-title %}
    <title>Register</title>
{% endblock %}
{% block content-main %}
    {% load static %}
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">注册界面</h3>
                </div>
                <div class="panel-body">
                    <form action="" class="form-horizontal" id="register_form">
                        {% csrf_token %}
                        {% for form in register_form %}
                            <div class="form-group">
                                <div class="col-sm-3 text-right">{{ form.label }}</div>
                                <div class="col-sm-8">{{ form }}
                                    <span id="{{ form.auto_id }}" class="pull-right" style="color: red"></span>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="form-group">
                            <div class="col-sm-3 text-right">选择头像</div>
                            <label for="avatar" class="col-sm-9 text-left"><img id="img_avatar"
                                                                                src="/media/avatar/default.png"
                                                                                alt="图片丢失"
                                                                                style="height: 50px;width: 50px;"
                                                                                class="img-circle"></label>
                            <input type="file" id="avatar" name="avatar" style="display: none">
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3 text-right">上传站点主题文件</div>
                            <label for="avatar" class="col-sm-9 text-left"></label>
                            <input type="file" id="theme" name="theme">
                        </div>
                        <div class="text-center">
                            <button class="btn btn-success" id="btn_register" type="button">注册</button>
                            <button class="btn btn-warning" id="btn_reset" type="reset">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(
            {#实时渲染头像#}
            $('#avatar').change(function () {
                    {#声明FileReader对象#}
                    let fileReader = new FileReader();
                    {#获取文件数据#}
                    let fileData = $(this)[0].files[0];
                    fileReader.readAsDataURL(fileData);
                    {#等待文件加载完再执行渲染，保重图片的数据完整渲染#}
                    fileReader.onload = () => {
                        $('#img_avatar').attr('src', fileReader.result);
                    }
                }
            )
            ,
            {#ajax提交数据#}
            $('#btn_register').click(function () {
                {#new 一个对象#}
                let formData = new FormData;
                {#遍历取到form表单中的值#}
                $.each($('#register_form').serializeArray(), function (index, data_obj) {
                    {#遍历的结果是(索引,数据对象)#}
                    {#console.log(index, data_obj)#}
                    formData.append(data_obj.name, data_obj.value)
                });
                {#将文件数据放入formData中#}
                formData.append('avatar', $("#avatar")[0].files[0]);
                formData.append('theme', $("#theme")[0].files[0]);
                {#提交表单#}
                $.ajax({
                    url: '',
                    type: 'post',
                    data: formData,
                    {#提交文件数据将下列两个参数设为false#}
                    processData: false,
                    contentType: false,
                    {#回调函数，拿到后端return的JsonResponse#}
                    success: function (response) {
                        {#JsonResponse中有状态码 只要不是200都是错误#}
                        if (response.code === 200) {
                            Swal.fire({
                                title: response.msg,
                                showDenyButton: true,
                                confirmButtonText: "去登陆",
                                denyButtonText: `继续注册`
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href = '{% url 'user:login' %}';
                                } else if (result.isDenied) {
                                    window.location.href = '{% url 'user:register' %}';
                                }
                            })
                        } else {
                            {#错误情况时渲染错误信息#}
                            {#console.log(response.errors)  格式【{ k:[v] }】#}
                            $.each(response.errors, function (key, value) {
                                let inputId = '#id_' + key;
                                $(inputId).next().text(value[0]).parent().addClass('has-error');
                            })
                        }
                    }
                })
            }),
            $('input').focus(function () {
                $(this).next().text('').parent().removeClass('has-error')
            })
        )
    </script>
{% endblock %}